<template>
  <el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total"
    :page-size="page.pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :current-page="page.currentPage"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
const props = defineProps({
  page: {
    type: Object,
    required: true,
    default: () => {
      return {
        total: 0,
        pageSize: 50,
        currentPage: 1,
        start: 0,
      }
    },
  },
})
const emits = defineEmits(['size-change', 'current-change'])
// 改变当前页
const handleCurrentChange = (val) => {
  props.page.currentPage = val
  props.page.start = (val - 1) * props.page.pageSize
  emits('current-change')
}
// 改变每页多少调
const handleSizeChange = (val) => {
  props.page.pageSize = val
  emits('size-change')
}
</script>

<style scoped>
.el-pagination {
  float: right;
}
</style>
